<template>
    <view class="li-centers">
        <view class="line">
        </view>
        <scroll-view class="scroll-view_H" :scroll-with-animation="true" :scroll-left="scrollFeft" :enable-flex="true"
            scroll-x="true">
            <view :class="['scroll-view-box', 'flex']">
                <view :class="['scroll-view-item', {
                    actives: current == index,
                },]" ref="scrollview" v-for="(item, index) in items.lineNodeList" :key="index">
                    <view class="gongBox">
                        <image class="gongjiao" v-if="currents == index" src="@/static/gongjiao.png"></image>
                    </view>
                    <view class="doc">
                        <!-- <view class="docts"></view> -->
                    </view>
                    <view class="texts-box">
                        <view class='texts'>
                            {{ item.pointName }}
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="arrow">
            <view class="right-arrow"> </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'swiperLine',
    props: {
        items: {
            type: Object,
            default: () => {
                return {}
            }
        },
        current: {
            type: Number,
            default: 0
        },
        currents: {
            type: Number || undefined,
            default: undefined
        },
    },
    data() {
        return {
            scrollFeft: 0,
            wrapperWidth: [],
            offsetLeft: 0,
            wrapper: 0
        }
    },
    mounted() {
        this.init()

    },
    watch: {
        currents(newVal) {
            if (
                !Array.isArray(this.wrapperWidth) ||
                newVal < 0 ||
                newVal >= this.wrapperWidth.length ||
                !this.wrapperWidth[newVal] ||
                typeof this.wrapperWidth[newVal].left !== 'number'
            ) {
                console.error('Invalid configuration: Check wrapperWidth array, index validity, or target element properties')
                return
            }
            // 使用解构赋值提取目标元素坐标
            const { left: targetLeft } = this.wrapperWidth[newVal]
            // 使用语义化变量名并修正拼写错误
            const containerOffset = this.offsetLeft
            this.scrollFeft = targetLeft - containerOffset - (this.wrapper / 2)
        }
    },
    methods: {
        init() {
            const query = uni.createSelectorQuery().in(this)
            query.selectAll('.li-centers')
                .boundingClientRect(data => {
                    this.wrapper = data[0].width
                })
                .exec()

            query.selectAll('.scroll-view-item')
                .boundingClientRect(data => {
                    // 增强数据校验和错误处理
                    if (!Array.isArray(data) || data.length === 0) {
                        console.error('Invalid elements data:', data)
                        return
                    }
                    this.offsetLeft = data[0].left || 0
                    this.wrapperWidth = data
                })
                .exec(() => {
                    if (this.wrapperWidth?.length > 0 && typeof this.current === 'number') {
                        const { left: targetLeft = 0 } = this.wrapperWidth[this.current] || {}
                        this.scrollFeft = targetLeft - this.offsetLeft - (this.wrapper / 2) // 保持拼写修正
                        console.log(this.scrollFeft, '我真的笑死 我是多少啊')
                    }
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.scroll-Y {
    white-space: nowrap;
    height: 90%;
    overflow-x: auto;
    display: flex;
    flex-direction: row;

}

.scroll-view_H {
    height: 100%;
}

.scroll-view-box {
    height: 100%;
    display: flex;
    flex-direction: row;
    padding-bottom: 18rpx;
}

.auto {
    overflow-x: auto;
}

.flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.line {
    position: absolute;
    top: 22rpx;
    right: 4rpx;
    /* width: 100%; */
    left: 4rpx;
    // z-index: -1;
    height: 3rpx;
    background-color: #a2f2ff;
    border-radius: 4rpx;
}

.scroll-view-item {
    display: inline-flex;
    height: 100%;
    min-width: 19rpx;
    flex-direction: column;
    align-items: center;
}


.li-centers {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: hidden;
    padding: 0rpx 12rpx;
}

.gongBox {
    // position: absolute;
    width: 20rpx;
    height: 20rpx;

    // top: -20rpx;
    // left: 0rpx;
    .gongjiao {
        width: 20rpx;
        height: 20rpx;
    }
}

// .gongjiao {
//     position: absolute;
//     width: 20rpx;
//     height: 20rpx;
//     top: -20rpx;
//     left: 0rpx;
// }


.doc {
    position: relative;
    /* position: relative; */
    /* left: 2rpx; */
    width: 8rpx;
    height: 8rpx;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 auto;
}

.texts-box {
    margin-top: 8rpx;
    flex: 1;
    overflow: hidden;

    .texts {
        width: 12rpx;
        font-size: 12rpx;
        line-height: 12rpx;
        // text-align: justify;
        text-align: justify;
        writing-mode: vertical-rl;
        text-orientation: upright;
        white-space: nowrap;
        color: #a1f1ff;
    }
}

.actives {

    .texts {
        color: #de191f;
    }

    // transform: translateZ(0);
    // animation: neon-glow 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
    // /* 延长动画时间 */
    // backface-visibility: hidden;
    // /* 触发硬件加速 */
    .doc {
        background: #de191f;
    }
}


// @keyframes neon-glow {

//     0%,
//     100% {
//         text-shadow:
//             0 0 4px #f0f,
//             /* 减少阴影数量 */
//             0 0 8px #f0f;
//         /* 缩小扩散半径 */
//     }

//     50% {
//         text-shadow:
//             0 0 8px #0ff,
//             0 0 16px #0ff;
//         /* 保持比例缩减 */
//     }
// }



.arrow {
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
}

.right-arrow {
    position: relative;
    width: 100%;
    height: 20rpx;
    /* 增加高度以便更清楚地看到效果 */
    clip-path:polygon(0 40%, calc(100% - 44px) 30%, calc(100% - 44px) 0%, 100% 60%, calc(100% - 20px) 60%, 0 60%);
    /* 箭头颜色 */
    background: #97e5ff;
}
</style>